<template>
  <div>
    <el-menu :default-active="route.fullPath" router class="el-menu-vertical-demo" unique-opened="true" @open="handleOpen" @close="handleClose">
      <span v-for="(menu, index) in store.menuList[0].children">
        <el-sub-menu :index="menu.path" v-if="menu.children">
          <template #title>
            <el-icon>
              <component :is="menu.meta.icon" />
            </el-icon>
            <span>{{ menu.meta.menuName }}</span>
          </template>
          <MenuItem :menuList="menu.children"></MenuItem>
        </el-sub-menu>
        <el-menu-item :index="menu.path" v-else>
          <el-icon v-if="menu.meta.icon">
            <component :is="menu.meta.icon" />
          </el-icon>
          <span>{{ menu.meta.menuName }}</span>
        </el-menu-item>
      </span>
    </el-menu>
  </div>
</template>

<script setup>
import { useStore } from "../../store";
import { useRoute } from "vue-router";
import { defineProps, ref, onMounted } from "vue";
import MenuItem from "./menuItem.vue";
let store = useStore();
let route = useRoute();
let icon = ref(route.meta.icon);
console.log(icon.value);
// onMounted(() => {});
</script>
<style></style>
